<template>
  <div>
    <p>
      <button @click="list(1)" class="btn btn-white btn-default btn-round">
        <i class="ace-icon fa fa-refresh"></i>
        刷新
      </button>
      &nbsp;&nbsp;
      <button @click="addModel()" class="btn btn-white btn-default btn-round">
        <i class="ace-icon fa fa-refresh"></i>
        新增
      </button>
    </p>
    <Pagination ref="Pagination" v-bind:list="list"></Pagination>
    <!-- PAGE CONTENT BEGINS -->
    <div class="row">
      <div v-for="teacher in teachers" :key="teacher.id" class="col-xs-12 col-sm-3 center" >
        <div>
          <span class="profile-picture">
            <img
              v-show="!teacher.image"
              class="editable img-responsive editable-click editable-empty"
              src="/static/image/profile-pic.jpg"
              v-bind:title="teacher.intro"
            />
            <img 
              v-show="teacher.image"
              class="editable img-responsive editable-click editable-empty"
              v-bind:src="teacher.image"
              v-bind:title="teacher.intro"
            />
          </span>

          <div class="space-4"></div>

          <div
            class="width-85 label label-info label-xlg arrowed-in arrowed-in-right"
          >
            <div class="inline position-relative">
              <a
                href="javascript:;"
                class="user-title-label dropdown-toggle"
                data-toggle="dropdown"
              >
                <i class="ace-icon fa fa-circle light-green"></i>
                &nbsp;
                <span class="white">{{ teacher.position }}</span>
              </a>
            </div>
          </div>
        </div>

        <div class="space-6"></div>

        <div class="text-center">
          <a
            href="javascript:;"
            class="text-info bigger-110"
            v-bind:title="teacher.motto"
          >
            <i class="ace-icon fa fa-user"></i>
            {{ teacher.name }}【{{ teacher.nickname }}】
          </a>
        </div>

        <div class="space-6"></div>

        <div class="profile-social-links align-center">
          <button v-on:click="editModel(teacher)" class="btn btn-xs btn-info">
            <i class="ace-icon fa fa-pencil bigger-120"></i>
          </button>
          &nbsp;
          <button v-on:click="del(teacher.id)" class="btn btn-xs btn-danger">
            <i class="ace-icon fa fa-trash-o bigger-120"></i>
          </button>
        </div>

        <div class="hr hr16 dotted"></div>
      </div>
    </div>
    <!-- Modal -->
    <div
      class="modal fade"
      id="teacher-form"
      tabindex="10"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">新增</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="name">姓名</label>
                <input
                  v-model="teacher.name"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                  id="name"
                  placeholder="姓名"
                />
              </div>
              <div class="form-group">
                <label for="nickname">昵称</label>
                <input
                  v-model="teacher.nickname"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                  id="nickname"
                  placeholder="昵称"
                />
              </div>
              <div class="form-group">
                <label for="avatorInput">头像</label>
                <BigFIle 
                  v-bind:input-id="'image-upload'" 
                  v-bind:text="'上传头像'"
                  v-bind:suffixs="['png','jpg','jpeg']"
                  v-bind:afterUpload="afterUpload"
                  v-bind:use="FILE_USE.TEACHER.key"
                  >
                </BigFIle>
              
                <div class="row" v-show="teacher.image">
                    <div class="col-md-4">
                        <img :src="teacher.image" class="img-responsive" alt="">
                    </div>
                </div>
              </div>
              <div class="form-group">
                <label for="posotion">职位</label>
                <input
                  v-model="teacher.position"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                  id="posotion"
                  placeholder="职位"
                />
              </div>
              <div class="form-group">
                <label for="motto">座右铭</label>
                <input
                  v-model="teacher.motto"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                  id="motto"
                  placeholder="座右铭"
                />
              </div>
              <div class="form-group">
                <label class="">简介</label>
                <div>
                  <textarea v-model="teacher.intro" class="form-control" rows="5"></textarea>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              取消
            </button>
            <button @click="save()" type="button" class="btn btn-primary">
              保存
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /.span -->
</template>
<script>
import Pagination from "../../components/pagination";
import BigFIle from "../../components/big-file";
import Toast from "../../../public/static/js/toast";
import Loading from "../../../public/static/js/loading";
import Confirm from "../../../public/static/js/confirm";
import Validator from "../../../public/static/js/validator";
import Tool from "../../../public/static/js/tool";

export default {
  components: { Pagination, BigFIle },
  name: "teachers",
  data() {
    return {
      base: `${process.env.VUE_APP_BASE_URL}/business`,
      fileBase: `${process.env.VUE_APP_BASE_URL}/file`,
      teacher: {},
      teachers: [],
      FILE_USE: FILE_USE,
    };
  },

  mounted: function () {
    // 调用父组件的activeSidebar方法
    // this.$parent.activeSidebar("business-course-sidebar")
    let _this = this;
    // 初始化每页条数
    _this.$refs.Pagination.size = 10;
    _this.list(1);
  },
  methods: {
    addModel() {
      let _this = this;
      _this.teacher = {};
      $("#teacher-form").modal("show");
    },
    list(page) {
      let _this = this;
      Loading.show();
      _this.$axios
        .get(`${_this.base}/admin/teachers`, {
          params: {
            page: page,
            size: _this.$refs.Pagination.size,
          },
        })
        .then((res) => {
          Loading.hide();
          _this.teachers = res.data.data.list;
          _this.$refs.Pagination.render(page, res.data.data.total);
        })
    },
    save() {
      let _this = this;
      /* if (!Validator.require(_this.teacher.name, '名称')
                || !Validator.require(_this.teacher.courseId, '课程ID')
                || !validator.length(_this.teacher.courseId, '课程ID' , 1, 8)) {
                return
            } */
      Loading.show();
      _this.$axios
        .post(`${_this.base}/admin/teachers`, _this.teacher)
        .then((res) => {
          Loading.hide();
          if (res.data.success) {
            $("#teacher-form").modal("hide");
            Toast.success("操作成功");
            _this.list(_this.$refs.Pagination.page);
          } else {
            Toast.warning("操作失败");
          }
        })
    },
    editModel(teacher) {
      let _this = this;
      // 使用空对象复制，防止编辑时直接修改data的属性(vue双向绑定会即时渲染)
      _this.teacher = $.extend({}, teacher);
      $("#teacher-form").modal("show");
    },
    del(teacherId) {
      Confirm.show("确定要删除吗?", () => {
        let _this = this;
        Loading.show();
        _this.$axios
          .delete(`${_this.base}/admin/teachers/${teacherId}`)
          .then((res) => {
            Loading.hide();
            if (res.data.success) {
              Toast.success("删除成功");
              _this.list(_this.$refs.Pagination.page);
            } else {
              Toast.error("删除失败");
            }
          })
      });
    },
    afterUpload(res) {
        let _this = this;
        let image = res.data.data;
        _this.$set(_this.teacher, "image", image.path)
    }
  },
};
</script>
<style scoped>
  img {
    width: 100%;
    height: 20vw;
}
</style>